<template>
  <div>
    <!-- h2 div p span这些原生的html元素,会被vue重新包装,会自动给他们添加一个原生的事件 -->
    <h2 @click="fn">父组件---{{ aaa }}</h2>
    <!-- native vue将当前的组件 看做原生的元素,给你自动添加一个click原生事件 -->
    <child-com :child="aaa" @click.native="fn" />
    <!-- 如果没有native,那我们就要在父组件里监听对应的事件,只要监听到了以后,就自动指向后面绑定的函数,子向父传值比较麻烦 -->
    <!-- <child-com :child="aaa" @click="fn" /> -->
  </div>
</template>

<script>
import ChildCom from './ChildCom.vue'
export default {
  name: 'VueAdminTemplateFatherComCopy',
  components: {
    ChildCom
  },
  props: {
    aaa: {
      type: Number,
      required: true
      // default: 0
    },
    // 如果父向子传值,是复杂数据类型的话,给这个props的默认值不能直接写对象,应该和data一样,通过一个函数返回一个新地址
    bbb: {
      type: Object,
      // 如果父向子传值,是复杂数据类型的时候,默认值不能给固定的地址:和data一样,用一个函数返回一个对象(新地址)
      default: () => {}
    }
  },
  methods: {
    fn() {
      // console.log(111)
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
